<template>
  <!-- 搜索详情 -->
  <div id="searchDtl">
    <header>
      <van-icon name="arrow-left"
                @click="$router.go(-1)" />
      <van-search v-model="searchData"
                  @clear="$router.go(-1)"
                  @input="searchInput"
                  shape="round" />
    </header>
    <nav>
      <van-tabs v-model="active"
                @click="handleClickTab">
        <van-tab title="单曲">
          <Single :rowText="rowText"
                  ref="Single" />
        </van-tab>
        <van-tab title="歌单">
          <SeachSoSngSheet ref="SeachSoSngSheet" />
        </van-tab>
        <van-tab title="视频">
          <AudioVisual ref="AudioVisual" />
        </van-tab>
        <van-tab title="歌词">
          <Lyric ref="Lyric" />
        </van-tab>
        <van-tab title="歌手">
          <SearchSinger ref="searchSinger" />
        </van-tab>
        <van-tab title="专辑">
          <SearchAlbum ref="SearchAlbum" />
        </van-tab>
        <van-tab title="用户">
          <SearchUser ref="SearchUser" />
        </van-tab>
      </van-tabs>
    </nav>
  </div>
</template>

<script>
import Single from './components/single'
import SeachSoSngSheet from './components/seachSongSheet'
import AudioVisual from './components/audioVisual'
import Lyric from './components/lyric'
import SearchUser from './components/searchUser'
import SearchAlbum from './components/searchAlbum'
import SearchSinger from './components/searchSinger'
export default {
  name: 'searchDtl',
  data() {
    return {
      searchData: '',
      rowText: '',
      active: 0,
      limit: 20,
      type: 1,
    }
  },
  components: {
    Single,
    SeachSoSngSheet,
    AudioVisual,
    Lyric,
    SearchUser,
    SearchAlbum,
    SearchSinger,
  },
  methods: {
    searchInput(row) {
      if (!row) return this.$router.go(-1)
    },
    handleClickTab(index) {
      if (index === 0) {
        this.type = 1
        this.$refs.Single.initData(this.rowText, this.limit, this.type)
      } else if (index === 1) {
        setTimeout(() => {
          this.$refs.SeachSoSngSheet.rowText = this.rowText
          this.type = 1000
          this.$refs.SeachSoSngSheet.initData(
            this.rowText,
            this.limit,
            this.type
          )
        }, 10)
      } else if (index === 2) {
        setTimeout(() => {
          this.$refs.AudioVisual.rowText = this.rowText
          this.$refs.AudioVisual.initData()
        }, 10)
      } else if (index === 3) {
        setTimeout(() => {
          this.$refs.Lyric.rowText = this.rowText
          this.$refs.Lyric.initData()
        }, 10)
      } else if (index == 4) {
        setTimeout(() => {
          this.$refs.searchSinger.rowText = this.rowText
          this.$refs.searchSinger.initData()
        }, 0)
      } else if (index == 5) {
        setTimeout(() => {
          this.$refs.SearchAlbum.rowText = this.rowText
          this.$refs.SearchAlbum.initData()
        }, 0)
      } else if (index == 6) {
        setTimeout(() => {
          this.$refs.SearchUser.rowText = this.rowText
          this.$refs.SearchUser.initData()
        }, 0)
      }
    },
  },
  created() {
    this.rowText = this.$route.query.searchText
    this.searchData = this.rowText
  },
}
</script>

<style scoped>
#searchDtl {
  width: 100%;
  height: 100%;
}
#searchDtl header {
  display: flex;
}
#searchDtl .van-search {
  width: 95%;
}
#searchDtl .van-icon {
  float: left;
  width: 5%;
  padding: 0.266667rem 0.2rem;
  line-height: 1rem;
}
</style>